<template>
    <div>
        <div class="table_wrap">
            <div class="page-title"><h3>{{title}}</h3></div>
            <Tables 
                class="style_c" 
                :title="'虚拟网络网段配置'"  
                :tableName="'vnet'" 
                :butns='butns' 
                :field='field'
                :tableData='vnetTableData' 
                :curPage="vnet_cur_page" 
                :pageSize="pageSize"
                :perNum='vnet_size' 
                :totalNum="vnet_total_num"
                :collectField="collect_field" 
                :clearSelectItems="selectedItems"
                @reset="reset"
                :rankable="true"
                @rankData="handleRankData"  
                @loadData ="_getVNetRange" 
                @sentSelectedItems="getSelectedItems" 
                @sentEditData="getEditData"
                @changePageSize='handleChangePageSize'>
            </Tables>
            <Tables 
                class="style_c" 
                :title="'虚拟网络保留网段配置'" 
                :tableName="'novnet'" 
                :butns='butns' 
                :field='field'
                :tableData ='novnetTableData' 
                :curPage="novnet_cur_page"  
                :pageSize="pageSize"
                :perNum='novnet_size'
                :totalNum="novnet_total_num" 
                :collectField="collect_field" 
                @reset="reset"
                :rankable="true"
                @rankData="handleRankData" 
                :clearSelectItem1="selectedItem1"
                @loadData="_getVNetReservedRange"
                @sentSelectedItem1="getSelectedItem1"  
                @sentEditData="getEditData"
                @changePageSize='handleChangePageSize'>
            </Tables>
        </div>
        
        <Modals 
            :id="'modal'" 
            :title="add_title" 
            :field='field' 
            :collectField="collect_field"
            :selectItem="select_item" 
            :status="status" 
            :errorMsg="errorMsg" 
            :type="type"
            :selectedItems="table_name === 'vnet' ? selectedItems : selectedItem1" 
            :editData="edit_data" 
            @sentErrorMsg="getErrorMsg"
            @addEvent="handleAddVNet"
            @editEvent="handleEditVNet"
            @delEvent="handleDelVNet">>
        </Modals>
    </div>
</template>
<script>
    let field = [
        {
            type:'checkbox',
        },
        {
            type:'rank',
        },
        {
            type:'ipinput',
            label:'网段',
            name:'ip',          
            regex:/^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/,
            requried:true, 
            remark:'*必填'
        },
        {
            type:'ipinput',
            label:'掩码',
            name:'mask',
            regex: /^(254|252|248|240|224|192|128|0)\.0\.0\.0$|^(255\.(254|252|248|240|224|192|128|0)\.0\.0)$|^(255\.255\.(254|252|248|240|224|192|128|0)\.0)$|^(255\.255\.255\.(255|254|252|248|240|224|192|128|0))$/ ,
            requried:true, 
            remark:'*必填'  
        },
        {
            type:'text',
            label:'VLAN',
            name:'vlan_id',
            regex: /^\d$|^[1-9]\d{0,2}$|^[1-3]\d{3}$|^40\d[0-4]$/,
            requried:true, 
            remark:'*必填(0~4094的整数)'  
        },
        {
            type:'select',
            label:'物理线路',
            name:'group_id',
            requried:true, 
            remark:'*必选'   
        }
    ]
    import Tables from 'components/common/Tables'
    import Modals from 'components/common/Modals'
    import NetService from 'services/netService'
    import SystemService from 'services/systemService'

    import PageData from 'libs/PageData'
    
    export default {
        components:{
            Tables,
            Modals
        },
        data() {
            return{
                title:'网络配置',   
                add_title:'',  
                field:field,
                butns:[
                    {
                        type:'add',
                        name:'添加',
                        event:'addEvent',
                        icon:`/static/img/add.png`,
                        class:'add_btn',
                    },
                    {
                        type:'del',
                        name:'删除',
                        event:'delEvent',
                        icon:`/static/img/delete.png`,
                        class:'del_btn',
                    },
                    {
                        type:'edit',
                        name:'编辑',
                        event:'editEvent',
                        icon:`/static/img/modpic.png`,
                        class:'edit_btn',
                    }
                ],
                pageSize: [10, 20, 40, 80],
                cur_page: 1,             
                status: "",
                errorMsg:'',
                type: '',
                edit_data: {},
                select_item: [],
                collect_field: 'id',
                table_name: '',
   
                vnet_cur_page: 1,
                vnet_size: 10,
                vnet_total_num: 0,
                vnetTableData: [], 
                selectedItems: [],

                novnet_cur_page: 1,
                novnet_size: 10,
                novnet_total_num: 0,
                novnetTableData: [],
                selectedItem1: [],

                vnet_order: 'desc',
				vnet_by: '',
				novnet_order: 'desc',
				novnet_by: ''
            }
        },
        created() {
            this._getVNetRange({
                oper: 'load',
                page: this.vnet_cur_page,
                size: this.vnet_size,
                order: this.vnet_order,
                by: this.vnet_by
            })
            this._getVNetReservedRange({
                oper: 'load',
                page: this.novnet_cur_page,
                size: this.novnet_size,
                order: this.novnet_order,
                by: this.novnet_by
            })
            this.getLine() 
        },
        methods:{
            handleAddVNet(params) {
                params.group_id = params.group_id.replace(/[^0-9]/ig,"") 
                if (this.table_name === 'vnet') {
                    params.oper = params.oper + "_vnet"
                    this._createVNetRange(params)
                } else {
                    params.oper = params.oper + "_novnet"
                    this._createVNetReservedRange(params)
                }
            },
            handleEditVNet(params) {
                params.group_id = params.group_id.replace(/[^0-9]/ig,"") 
                if (this.table_name === 'vnet') {
                    params.oper = params.oper + "_vnet"
                    this._updateVNetRange(params)
                } else {
                    params.oper = params.oper + "_novnet"
                    this._updateVNetReservedRange(params)
                }
            },
            handleDelVNet(params) {
                if (this.table_name === 'vnet') {
                    params.oper = params.oper + "_vnet"
                    this._destroyVNetRange(params)
                } else {
                    params.oper = params.oper + "_novnet"
                    this._destroyVNetReservedRange(params)
                }
            },
            getErrorMsg(msg) {
                this.errorMsg = msg
            },
            getSelectedItems(selectedItems) {
                this.selectedItems = selectedItems
            },
            getSelectedItem1(selectedItem1) {
                this.selectedItem1 = selectedItem1
            },
            getEditData(editdata) {
                this.edit_data = editdata 
            },
            reset(type, tableName) {
                this.status = ""
                this.errorMsg = ''
                this.type = type
                this.table_name = tableName
                if (tableName === 'novnet') {     
                    this.add_title = "虚拟网络保留网段"
                } else {
                    this.add_title = "虚拟网络网段"
                } 
                $('.inputs_wrap .error_foramt').removeClass('error_foramt')
            },
            handleRankData(params, tableName) {
                if (tableName === 'vnet') {
                    params.page = this.vnet_cur_page
                    params.size = this.vnet_size
                    this.vnet_order = params.order 
                    this.vnet_by = params.by
                    this._getVNetRange(params)
                } else {
                    params.page = this.novnet_cur_page
                    params.size = this.novnet_size
                    this.novnet_order = params.order
                    this.novnet_by = params.by
                    this._getVNetReservedRange(params)
                }
            },
            handleChangePageSize(page, size, tableName) {
                if (tableName === 'vnet') {
                    this.vnet_cur_page = page
                    this.vnet_size = size
                    let params = {
                        page: this.vnet_cur_page,
                        size: this.vnet_size,
                        order: this.vnet_order,
                        by: this.vnet_by
                    }
                    this._getVNetRange(params)
                } else {
                    this.novnet_cur_page = page
                    this.novnet_size = size
                    let params = {
                        page: this.novnet_cur_page,
                        size: this.novnet_size,
                        order: this.novnet_order,
                        by: this.novnet_by
                    }
                    this._getVNetReservedRange(params)
                }
            },
            _getVNetRange(params) {
                this.status ='ing'  
                NetService.getVNetRange(params)
                .then((res) => {
                    if (res.errcode === 0) {
                        this.status ='ok'
                        let data = res['15'].data  
                        this.vnet_total_num = new PageData(data, this.vnet_size).totalpage
                        let cur_page_date =  new PageData(data, this.vnet_size).data(params.page)
                        let page = params.page ? params.page : this.vnet_cur_page
                        if (!params.oper) {
                            params.oper = 'load'
                        }
                        if (params.oper.indexOf('add')>=0) {//添加完到最新一页
                            page = this.vnet_total_num
                        } else if (params.oper.indexOf('del') >= 0 && cur_page_date.length === 0 && page>1) {//删除后当前页无数据，跳到前一页
                            page--
                        }
                        if (params.oper.indexOf('del') >= 0 || params.oper.indexOf('edit') >= 0) {
                             this.selectedItems = []      
                        }
                        this.vnet_cur_page = page
                        this.vnetTableData =  new PageData(data, this.vnet_size).data(page).map((item) => { 
                            return {
                                id: item.id,
								ip: item.ip,
								mask: item.mask,
								vlan_id: item.vlan_id,
								group_id: '线路' + item.group_id
                            }
                        })
                    } else {
                        this.status ='error'
                        this.errorMsg = res.errorMessage    
                    }
                })
            },
            _createVNetRange(params) {
                params = {
                    15: `${params.ip}|${params.mask}|${params.vlan_id}|${params.group_id}`
                }
                NetService.createVNetRange(params)
                .then((res) => {
                    if (res.errcode === 0) {
                        this.$Message.success({
                            closable: true,
                            content: '添加成功！',
                            duration: 5
                        })
                        this._getVNetRange(params)
                    }
                })
            },
            _updateVNetRange(params) {
                params = {
                    15: `${params.id}|${params.ip}|${params.mask}|${params.vlan_id}|${params.group_id}`
                }
                NetService.updateVNetRange(params)
                    .then((res) => {
                        if (res.errcode === 0) {
                            this.$Message.success({
                                closable: true,
                                content: '修改成功！',
                                duration: 5
                            })
                            this._getVNetRange(params)
                        }
                    })
            },
            _destroyVNetRange(params) {
                params = {
                    15: params.ids
                }
                NetService.destroyVNetRange(params)
                    .then((res) => {
                        if (res.errcode === 0) {
                            this.$Message.success({
                                closable: true,
                                content: '删除成功！',
                                duration: 5
                            })
                            this._getVNetRange(params)
                        }
                    })
            },

            _getVNetReservedRange(params) {
                this.status ='ing'  
                NetService.getVNetReservedRange(params)
                    .then((res) => {
                        if (res.errcode === 0) {
                            this.status ='ok'
                            let data = res['16'].data  
                            this.novnet_total_num = new PageData(data, this.novnet_size).totalpage
                            let cur_page_date =  new PageData(data, this.novnet_size).data(params.page)
                            let page = params.page ? params.page : this.novnet_cur_page
                            if (!params.oper) {
                                params.oper = 'load'
                            }
                            if (params.oper.indexOf('add') >= 0) {//添加完到最新一页
                                page = this.novnet_total_num
                            } else if (params.oper.indexOf('del') >= 0 && cur_page_date.length === 0 && page > 1) {//删除后当前页无数据，跳到前一页
                                page--
                            }
                            if (params.oper.indexOf('del') >= 0 || params.oper.indexOf('edit') >= 0) {
                                this.selectedItems = []      
                            }
                            this.novnet_cur_page = page
                            this.novnetTableData =  new PageData(data, this.novnet_size).data(page).map((item) => { 
                                return {
                                    id: item.id,
                                    ip: item.ip,
                                    mask: item.mask,
                                    vlan_id: item.vlan_id,
                                    group_id: '线路' + item.group_id
                                }
                            })
                        } else {
                            this.status ='error'
                            this.errorMsg = res.errorMessage    
                        }
                    })
            },
            _createVNetReservedRange(params) {
                params = {
                    16: `${params.ip}|${params.mask}|${params.vlan_id}|${params.group_id}`
                }
                NetService.createVNetReservedRange(params)
                    .then((res) => {
                        if (res.errcode === 0) {
                            this.$Message.success({
                                closable: true,
                                content: '添加成功！',
                                duration: 5
                            })
                            this._getVNetReservedRange(params)
                        }
                    })
            },
            _updateVNetReservedRange(params) {
                params = {
                    16: `${params.id}|${params.ip}|${params.mask}|${params.vlan_id}|${params.group_id}`
                }
                NetService.updateVNetReservedRange(params)
                    .then((res) => {
                        if (res.errcode === 0) {
                            this.$Message.success({
                                closable: true,
                                content: '修改成功！',
                                duration: 5
                            })
                            this._getVNetReservedRange(params)
                        }
                    })
            },
            _destroyVNetReservedRange(params) {
                params = {
                    16: params.ids
                }
                NetService.destroyVNetReservedRange(params)
                    .then((res) => {
                        if (res.errcode === 0) {
                            this.$Message.success({
                                closable: true,
                                content: '删除成功！',
                                duration: 5
                            })
                            this._getVNetReservedRange(params)
                        }
                    })
            },    
            getLine() {
                SystemService.getLine()
                .then((res) => {
                    if (res.errcode === 0) {
                        this.select_item = res.group_id.map((item) => {
                            return  '线路' + item
                        })
                    }
                })
            },
            popoverShow(ele,content) {//删除弹窗
                $(ele).attr({
                    'data-toggle': 'popover',
                    'data-placement':"bottom",
                    'data-content': content
                }).popover('show')
                setTimeout(function() {
                    $(ele).popover('destroy')
                }, 1500)
            },
        }
    }
</script>
<style scoped lang="less">
    .table_wrap{
        background: #ffffff;
        margin: 30px;
    }
</style>